<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div>
      <div class="body">
        <topThree :dayTimeLists="dayTimeLists" :data1="data1" id="head"></topThree>
        <topList  style="margin-top: 55vw;" :data1="data1"></topList>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script>
  import topThree from '../../components/topTen/topThree'
  import topList from '../../components/topTen/topList'
  import request from '../../request/index'
    export default {
      name: "topTen",
      components:{
        topThree,
        topList
      },
      data(){
        return{
          isLoading: false,
          data1:[],
          dayTimeLists:'',
          screen:1,
        }
      },
      methods:{
        onRefresh() {
          setTimeout(() => {
            this.$toast('刷新成功');
            this.isLoading = false;
          }, 500);
        },
      },
      created(){
        request.getTopten(this);
        if (this._globe.isAndroid){
          $(document).ready(function(){
            $(window).scroll(function() {
              var top = 70; //获取指定位置
              var scrollTop = $(window).scrollTop();  //获取当前滑动位置
              if(scrollTop < top){                 //滑动到该位置时执行代码
                $(".top").css('opacity',scrollTop/top);
              }else{
                $(".top").css('opacity',1);
              }
            });
          });
        }
      },
      mounted(){
        document.title = "TOP 10";
      }
    }
</script>

<style scoped lang="scss">
.body{
  width: 100vw;
  height: 100%;
  padding-bottom: 10vw;
  background: linear-gradient(to bottom right,#FF8282,#FF62C6,#FFE29E);
  position: relative;
    .top{
      width: 100vw;
      height:70px;
      background: #333333;
      position: fixed;
      opacity: 0;
      top: 0px;
    }
}
</style>
